<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <link rel="stylesheet" href="css/register.css">
</head>

<body>
<div class="loginBox">
    <h2>注册</h2>
    <?php if (isset($_SESSION['error_message'])): ?>
        <div class="error-message"><?= htmlspecialchars($_SESSION['error_message']) ?></div>
        <?php unset($_SESSION['error_message']); ?>
    <?php endif; ?>
    <form action="registerHandler.php" method="post" id="registerForm">
        <div class="item">
            <input type="text" id="txtUsername" name="username" onblur="" required>
            <label for="txtUsername" id="name_prompt">用户名(3-10位字符)</label>
        </div>
        <div class="item">
            <input type="password" id="txtPassword" name="password" onblur="" required>
            <label for="txtPassword" id="pwd_prompt">密码(4-16位字符)</label>
        </div>
        <div class="item">
            <input type="password" id="confirmPassword" name="confirmPassword" onblur="" required>
            <label for="confirmPassword" id="conpwd_prompt">确认密码</label>
        </div>
        <div class="item">
            <input type="text" id="realName" onblur="" name="realName" required>
            <label for="realName" id="name_prompt">昵称(不能为空)</label>
        </div>
        <div class="item">
            <input type="text" id="txtTel" name="phone" onblur="" required>
            <label for="txtTel" id="tel_prompt">手机号</label>
        </div>
        <div class="item">
            <input type="text" id="textEmail" name="email" onblur="" required>
            <label for="txtEmail" id="email_prompt">邮箱</label>
            <button class="btn1" onclick="">注册
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </button>
    </form>
</div>
<script>
    document.getElementById('registerForm').addEventListener('submit', function(e) {
        const username = document.querySelector('[name="username"]').value;
        const password = document.querySelector('[name="password"]').value;
        const confirmPassword = document.querySelector('[name="confirmPassword"]').value;
        const realName = document.querySelector('[name="realName"]').value;
        const phone = document.querySelector('[name="phone"]').value;
        const email = document.querySelector('[name="email"]').value;
        const errors = [];

        // 前端验证（与后端逻辑一致）
        if (username.length < 3 || username.length > 10) errors.push('用户名需为3-10位字符');
        if (password.length < 4 || password.length > 16) errors.push('密码需为4-16位字符');
        if (password !== confirmPassword) errors.push('确认密码与密码不一致');
        if (!realName) errors.push('真实姓名不能为空');
        if (!/^1[3-9]\d{9}$/.test(phone)) errors.push('手机号格式不正确');
        if (!/^[\w\-]+@[\w\-]+\.[a-z]{2,}$/i.test(email)) errors.push('邮箱格式不正确');

        if (errors.length > 0) {
            e.preventDefault();
            alert(errors.join('\n'));
        }
    });
</script>
</body>

</html>
